<script setup lang="ts">
import { getHotRecommendAPI } from '@/apis/hot';
import { onLoad } from '@dcloudio/uni-app';
import { ref } from 'vue'
import type { SubTypeItem } from '@/types/hot'
import Index from '../index/index.vue';
// 热门推荐页 标题和url
const hotMap = [
    { type: '1', title: '特惠推荐', url: '/hot/preference' },
    { type: '2', title: '爆款推荐', url: '/hot/inVogue' },
    { type: '3', title: '一站买全', url: '/hot/oneStop' },
    { type: '4', title: '新鲜好物', url: '/hot/new' }
]
// 接收页面传递的数据
const props = defineProps<{
    type: string
}>()
// 设置标题 从hotMap 数组中找到符合条件的数组元素 find
const currentHot = hotMap.find((v) => v.type === props.type)
uni.setNavigationBarTitle({
    title: currentHot!.title
})
// console.log(currentHot, 33333)

const bannerPicture = ref('')
const subTypes = ref<(SubTypeItem & { finished?: boolean })[]>([])
const activeIndex = ref(0)

//获取热门推荐数据
const getHotRecommend = async () => {
    const res = await getHotRecommendAPI(currentHot!.url, {
        page: import.meta.env.DEV ? 30 : 1,
        pageSize: 10
    })
    console.log(res, 11111)

    bannerPicture.value = res.result.bannerPicture
    subTypes.value = res.result.subTypes
}
onLoad(() => {
    getHotRecommend()
})

//滚动触底
const onScrolltolower = async () => {
    //获取当前tab的数据 根据 activeIndex
    const currentSubTypes = subTypes.value[activeIndex.value]
    // 对分页的条件进行判断
    if (currentSubTypes.goodsItems.page < currentSubTypes.goodsItems.pages) {
        // 让页码值加1
        currentSubTypes.goodsItems.page++
    } else {
        // 标记已结束的加载状态
        currentSubTypes.finished = true
        // 已经到最后
        return uni.showToast({
            icon: 'none',
            title: '没有更多数据了...'
        })
    }
    const res = await getHotRecommendAPI(currentHot!.url, {
        subType: currentSubTypes.id,
        page: currentSubTypes.goodsItems.page,
        pageSize: 10
    })
    //获取新的数据
    const newSubTypes = res.result.subTypes[activeIndex.value]
    currentSubTypes.goodsItems.items.push(...newSubTypes.goodsItems.items)
}
</script>

<template>
    <view class="viewport">
        <!-- 推荐封面图 -->
        <view class="cover">
            <image :src="bannerPicture" class="image" mode="widthFix"></image>
        </view>
        <!-- 推荐选项 -->
        <view class="tabs">
            <text class="text" :class="{ active: index === activeIndex }" v-for="(item, index) in subTypes"
                :key="item.id" @tap="activeIndex = index">
                {{ item.title }}
            </text>
        </view>
        <!-- 推荐列表 -->
        <scroll-view scroll-y class="scroll-view" v-for="(item, index) in subTypes" :key="item.id"
            v-show="index === activeIndex" @scrolltolower="onScrolltolower">
            <view class="goods">
                <navigator hover-class="none" class="navigator" v-for="goods in item.goodsItems.items" :key="goods.id"
                    :url="`/pages/goods/goods?id=${goods.id}`">
                    <image class="thumb" :src="goods.picture"></image>
                    <view class="name ellipsis">{{ goods.name }}</view>
                    <view class="price">
                        <text class="symbol">¥</text>
                        <text class="number">{{ goods.price }}</text>
                    </view>
                </navigator>
            </view>
            <view class="loading-text">
                {{ item.finished ? '没有更多数据了....' : '正在加载...' }}
            </view>
        </scroll-view>
    </view>
</template>

<style lang="scss">
page {
    height: 100%;
    background-color: #f4f4f4;
}

.viewport {
    display: flex;
    flex-direction: column;
    height: 100%;
    padding: 180rpx 0 0;
    position: relative;
}

.cover {
    width: 750rpx;
    height: 225rpx;
    border-radius: 0 0 40rpx 40rpx;
    overflow: hidden;
    position: absolute;
    left: 0;
    top: 0;
}

.cover .image {
    width: 750rpx;
}

.scroll-view {
    flex: 1;
    overflow: hidden;
}

.tabs {
    display: flex;
    justify-content: space-evenly;
    height: 100rpx;
    line-height: 90rpx;
    margin: 0 20rpx;
    font-size: 28rpx;
    border-radius: 10rpx;
    box-shadow: 0 4rpx 5rpx rgba(200, 200, 200, 0.3);
    color: #333;
    background-color: #fff;
    position: relative;
    z-index: 9;
}

.tabs .text {
    margin: 0 20rpx;
    position: relative;
}

.tabs .active::after {
    content: '';
    width: 40rpx;
    height: 4rpx;
    transform: translate(-50%);
    background-color: #27ba9b;
    position: absolute;
    left: 50%;
    bottom: 24rpx;
}

.goods {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    padding: 0 20rpx 20rpx;
}

.goods .navigator {
    width: 310rpx;
    padding: 20rpx;
    margin-top: 20rpx;
    border-radius: 10rpx;
    background-color: #fff;
}

.goods .thumb {
    width: 305rpx;
    height: 305rpx;
}

.goods .name {
    height: 88rpx;
    font-size: 26rpx;
}

.goods .price {
    line-height: 1;
    color: #cf4444;
    font-size: 30rpx;
}

.goods .symbol {
    font-size: 70%;
}

.goods .decimal {
    font-size: 70%;
}

.loading-text {
    text-align: center;
    font-size: 28rpx;
    color: #666;
    padding: 20rpx 0 50rpx;
}
</style>